<template>
  <div id="chargesDetails">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="charges_hd">
      <h6>{{orderTopAmt}}元</h6>
      <p>{{payType}}</p>
      <h5>{{costDesc}}</h5>
    </div>
    <div class="charges_box">
      <div class="charges_list" v-for="(item, index) in chargesArr" :key="index">
        <p class="charges_list_one">
          {{item.costName}}
          <span>{{item.costAmt}}元</span>
        </p>
        <p class="charges_list_two">{{item.costDesc}}</p>
      </div>
      <p class="chargesAmt">合计：{{orderAmt}}元</p>
      <p class="hx"></p>
      <div v-show="pinchetype=='1'">
        <!--拼车-->
        <div v-for="(item, index) in chargespinche" :key="index">
          <p class="charges_coupon">
            {{item.costName}}
            <span>{{item.costAmt}}元</span>
          </p>
          <p class="charges_list_two">{{item.costDesc}}</p>
        </div>
      </div>
      <div v-show="pinchetype=='0'">
        <!--独享-->
      </div>
      <p class="estimateAmt" v-if="payType == '未支付'">
        预计支付
        <span>{{orderAmt}}元</span>
      </p>
      <div v-else>
        <p class="estimateAmt">
          实际支付
          <span>{{payAmt}}元</span>
        </p>
      </div>
      <p class="faremin">*车费计算四舍五入取小数点后两位</p>
      <p class="seeValuationRules" @click="ValuationRulesBtn">查看计价规则</p>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Popup, PopupTitleBar, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/phoneOrderHttp';
var CryptoJS = require('crypto-js');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      rulesPop: false,
      title: '费用明细',
      costDesc: '',
      chargesArr: [],
      orderTopAmt: '0.00',
      orderAmt: '0.00', // 订单费用
      couponPrice: '0.00', // 优惠券金额
      payAmt: '0.00', // 实际支付金额
      payType: '未支付', // 支付状态
      IsTopbar: true,
      couponPricestatus: false,
      pinchetype: '1', // 拼车单还是独享 1 拼车 0 独享
      chargespinche: []
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
    if (this.$route.query.orderno) {
      let params = {
        orderNo: this.$route.query.orderno
      };
      Loading.show();
      http.post('/pakj/hitchOrder/getOrderCost', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.orderAmt = res.data.data.preAmt; // 预支付
          this.couponPrice = res.data.data.couponPrice; // 优惠券
          this.payType = res.data.data.payStatus; // 支付状态
          this.payAmt = res.data.data.lastAmt; // 实际支付金额
          this.costDesc = res.data.data.costDesc;
          this.chargesArr = res.data.data.detail;
          this.pinchetype = res.data.data.orderType;
          this.chargespinche = res.data.data.refDetail;
          if (this.payType === '未支付') {
            this.orderTopAmt = res.data.data.preAmt; // 预支付
          } else {
            this.orderTopAmt = res.data.data.lastAmt;
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {
    ValuationRulesBtn() {
      this.$router.push({
        name: 'hitchhikeValuationRules',
        query: {
          orderno: this.$route.query.orderno
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p, h5, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#chargesDetails {
}

.charges_hd {
  background-color: #fff;
  padding-top: 40px;
}

.charges_hd h6 {
  text-align: center;
  font-size: 36px;
  color: #333;
  padding-bottom: 10px;
  font-weight: 400;
}

.charges_hd p {
  text-align: center;
  font-size: 24px;
  color: #999;
  padding-bottom: 40px;
}

.charges_hd h5 {
  font-size: 24px;
  color: #999;
  padding: 0px 82px 40px 82px;
  font-weight: 400;
}

.charges_box {
  background-color: #fff;
  padding: 0px 82px 40px 82px;
}

.hx {
  height: 1px;
  background-color: #ccc;
  padding: 0px 82px 0px 82px;
  margin-top: 20px;
}

.charges_list {
  padding-top: 24px;
}

.charges_list_one {
  font-size: 28px;
  color: #666;
}

.charges_list_one span {
  float: right;
}

.charges_list_two {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.charges_list_two span {
  float: right;
}

.chargesAmt {
  padding-top: 40px;
  font-size: 28px;
  color: #333;
  text-align: right;
}

.charges_coupon {
  font-size: 28px;
  padding-top: 40px;
  color: #FF6917;
}

.charges_coupon span {
  float: right;
}

.estimateAmt {
  font-size: 28px;
  padding-top: 80px;
  color: #666;
  text-align: right;
}

.estimateAmt span {
  font-size: 40px;
}

.faremin {
  font-size: 22px;
  padding-top: 4px;
  color: #999;
  text-align: right;
}

.seeValuationRules {
  width: 260px;
  height: 88px;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
  line-height: 88px;
  margin: 108px auto 0px auto;
  text-align: center;
  font-size: 30px;
  color: #666;
}

.rules_ct {
  background-color: #fff;
  height: 91.8vh;
}
</style>
